<template>
  <div class="page-container update-user-info">
    <van-nav-bar
      title="修改个人信息"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <!-- 头像上传 -->
          <van-cell title="头像" center :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}">
            <template #right-icon>
              <van-uploader
                v-model="fileList"
                :max-count="1"
                :before-read="beforeRead"
                :after-read="afterRead"
                preview-size="80px"
                preview-image
                :preview-full-image="true"
                image-fit="cover"
              >
                <template #preview-cover="{ file }">
                  <div class="preview-cover" v-if="file?.status === 'uploading' || file?.status === 'failed'">
                    <van-loading v-if="file?.status === 'uploading'" type="spinner" size="24" />
                    <van-icon v-if="file?.status === 'failed'" name="close" style="color: var(--van-danger-color);" size="24" />
                  </div>
                </template>
                <!-- 添加默认上传按钮的插槽 -->
                <template #default>
                  <div class="upload-trigger">
                    <van-icon name="photograph" size="24" />
                    <span>上传头像</span>
                  </div>
                </template>
              </van-uploader>
            </template>
          </van-cell>

          <!-- 用户名只读展示 -->
          <van-field
            v-model="userStore.userInfo.username"
            label="用户名"
            readonly
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}"
          />
          
          <!-- 昵称 -->
          <van-field
            v-model="formData.nickname"
            name="nickname"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请输入昵称' },
            {
              pattern: /^.{1,10}$/, // 正则表达式校验昵称格式
              message: '昵称长度不能超过10个字符',
            },]"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}"
          />
          
          <!-- 手机号 -->
          <van-field
            v-model="formData.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
            ]"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}"
          />

          <!-- 年龄范围 -->
          <van-field
            v-model="ageGroupText"
            is-link
            readonly
            name="ageGroup"
            label="年龄范围"
            placeholder="点击选择年龄范围"
            @click="showPicker = true"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}"
          />
        </van-cell-group>

        <!-- 年龄范围选择器 -->
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            title="选择年龄范围"
            show-toolbar
          />
        </van-popup>

        <!-- 提交按钮 -->
        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit"  :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '22px' : ''}">
            保存修改
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { profile } from '@/api/user'
import { useUserStore } from '@/stores/user'
import axios from 'axios'

const router = useRouter()
const userStore = useUserStore()
const fileList = ref([])

// 表单数据
const formData = ref({
  nickname: '',
  phone: '',
  ageGroup: 0
})

// 年龄范围选择器
const showPicker = ref(false)
const ageGroupText = ref('')
const columns = [
  { text: '青少年', value: 0 },
  { text: '老年人', value: 1 }
]

// 获取用户头像
const fetchUserAvatar = async () => {
  try {
    if (!userStore.userInfo.avatar) {
      return
    }

    // 直接使用头像URL，不需要额外处理
    const avatarUrl = userStore.userInfo.avatar

    // 更新文件列表，直接使用头像URL
    fileList.value = [{
      url: avatarUrl,
      isImage: true,
      status: 'done',
      message: '加载成功',
      file: null
    }]
  } catch (error) {
    console.error('获取头像失败：', error)
    showToast({
      message: '获取头像失败',
      type: 'fail'
    })
  }
}

// 文件上传前的校验
const beforeRead = (file) => {
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png']
  if (!allowedTypes.includes(file.type)) {
    showToast('只能上传 JPG 或 PNG 格式的图片')
    return false
  }

  // 验证文件大小（限制为 5MB）
  if (file.size > 5 * 1024 * 1024) {
    showToast('图片大小不能超过 10MB')
    return false
  }

  return true
}

// 文件读取后的处理
const afterRead = async (file) => {
  if (!file || !file.file) {
    showToast('文件无效')
    return
  }

  // 更新文件状态为上传中
  file.status = 'uploading'
  file.message = '上传中...'
  
  try {
    // 获取token，如果没有token则提示需要登录
    const token = localStorage.getItem('token')
    if (!token) {
      showToast('请先登录')
      file.status = 'failed'
      return
    }

    // 创建 FormData
    const formData = new FormData()
    formData.append('file', file.file)

    // 设置请求头，包含认证信息
    const headers = {
      'Authorization': token.startsWith('Bearer ') ? token : `Bearer ${token}`,
    }

    // 使用 baseURL
    const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api'
    const res = await axios.post(`${baseURL}/user/avatar`, formData, { 
      headers,
      timeout: 10000, // 设置10秒超时
      withCredentials: true // 允许携带认证信息
    })

    // 检查响应的 data 字段
    if (res.data && res.data.code === 200) {
      const newAvatarUrl = res.data.data
      
      // 更新文件列表
      fileList.value = [{
        ...file,
        url: newAvatarUrl,
        status: 'done',
        message: '上传成功',
        isImage: true,
        file: null // 清除原始文件对象，避免内存占用
      }]
      
      // 更新 store 中的头像
      userStore.setUserInfo({
        ...userStore.userInfo,
        avatar: newAvatarUrl
      })

      showToast({
        message: '头像更新成功',
        type: 'success'
      })
    } else {
      throw new Error(res.data?.message || '上传失败')
    }
  } catch (error) {
    // 确保在出错时文件状态正确设置
    if (file) {
      file.status = 'failed'
      file.message = '上传失败'
    }
    
    console.error('上传错误：', error)
    if (error.response) {
      if (error.response.status === 401) {
        showToast({
          message: '登录已过期，请重新登录',
          type: 'fail'
        })
        // 可以在这里添加重定向到登录页面的逻辑
        router.push('/login')
      } else {
        showToast({
          message: error.response.data?.message || '上传失败，请稍后重试',
          type: 'fail'
        })
      }
    } else if (error.request) {
      // 请求发送失败
      showToast({
        message: '网络连接失败，请检查网络设置',
        type: 'fail'
      })
    } else {
      // 其他错误
      showToast({
        message: error.message || '上传失败，请稍后重试',
        type: 'fail'
      })
    }
  }
}

// 初始化表单数据
onMounted(async () => {
  // 从 store 中获取初始数据
  formData.value = {
    nickname: userStore.userInfo.nickname || '',
    phone: userStore.userInfo.phone || '',
    ageGroup: userStore.userInfo.ageGroup || 0
  }
  
  // 设置年龄范围文本
  ageGroupText.value = formData.value.ageGroup === 0 ? '青少年' : '老年人'

  // 获取用户头像
  await fetchUserAvatar()
})

// 在组件卸载时清理URL对象
onUnmounted(() => {
  if (fileList.value.length > 0 && fileList.value[0].url) {
    URL.revokeObjectURL(fileList.value[0].url)
  }
})

// 年龄范围选择确认
const onConfirm = (item) => {
  formData.value.ageGroup = item.selectedOptions[0]?.value
  ageGroupText.value = item.selectedOptions[0]?.text
  showPicker.value = false
}

// 提交表单
const onSubmit = async () => {
  try {
    const loading = showLoadingToast({
      message: '保存中...',
      forbidClick: true,
    })

    const res = await profile({
      nickname: formData.value.nickname,
      phone: formData.value.phone,
      ageGroup: formData.value.ageGroup
    })

    loading.close()

    if (res.code === 200) {
      // 更新 store 中的用户信息
      userStore.setUserInfo({
        ...userStore.userInfo,
        nickname: formData.value.nickname,
        phone: formData.value.phone,
        ageGroup: formData.value.ageGroup
      })

      showToast({
        message: '保存成功',
        type: 'success'
      })
      
      router.back()
    }
  } catch (error) {
    showToast({
      message: error.message || '保存失败',
      type: 'fail'
    })
  }
}
</script>

<style lang="scss" scoped>
.update-user-info {
  min-height: 100vh;
  background: #f7f8fa;

  .content {
    padding: 20px;

    .van-cell-group {
      margin-bottom: 20px;
    }

    .preview-cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
    }

    // 添加上传触发器样式
    .upload-trigger {
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f7f8fa;
      border-radius: 4px;
      cursor: pointer;

      span {
        margin-top: 8px;
        font-size: 12px;
        color: #666;
      }
    }

    :deep(.van-uploader__preview) {
      border-radius: 4px;
      overflow: hidden;
    }

    :deep(.van-uploader__preview-image) {
      border-radius: 4px;
      overflow: hidden;
    }

    :deep(.van-uploader__upload) {
      margin-left: 8px;
      width: 80px !important;
      height: 80px !important;
      background-color: #f7f8fa;
      border-radius: 4px;
      display: none; // 隐藏默认的上传按钮
    }

    :deep(.van-cell) {
      padding: 16px;
      align-items: center;
    }

    .submit-btn {
      margin-top: 24px;
      padding: 0 16px;
    }
  }
}
</style>

